<template>
    <view class="masonry">
      <template v-if="tabIndex === 0">
        <view class="column">
          <view class="card topic">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
            ></image>
            <view class="name">忙里忙外，回家吃饭</view>
            <view class="price">19.9元<text>起</text></view>
            <view class="extra">
              <text class="icon-heart">1220</text>
              <text class="icon-preview">1000</text>
            </view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
        </view>
        <view class="column">
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card topic">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
            ></image>
            <view class="name">忙里忙外，回家吃饭</view>
            <view class="price">19.9元<text>起</text></view>
            <view class="extra">
              <text class="icon-heart">1220</text>
              <text class="icon-preview">1000</text>
            </view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
        </view>
      </template>
      <template v-if="tabIndex === 1">
        <view class="column">
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card topic">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
            ></image>
            <view class="name">忙里忙外，回家吃饭</view>
            <view class="price">19.9元<text>起</text></view>
            <view class="extra">
              <text class="icon-heart">1220</text>
              <text class="icon-preview">1000</text>
            </view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
        </view>
        <view class="column">
          <view class="card topic">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
            ></image>
            <view class="name">忙里忙外，回家吃饭</view>
            <view class="price">19.9元<text>起</text></view>
            <view class="extra">
              <text class="icon-heart">1220</text>
              <text class="icon-preview">1000</text>
            </view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
        </view>
      </template>
      <template v-if="tabIndex === 2">
        <view class="column">
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card topic">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
            ></image>
            <view class="name">忙里忙外，回家吃饭</view>
            <view class="price">19.9元<text>起</text></view>
            <view class="extra">
              <text class="icon-heart">1220</text>
              <text class="icon-preview">1000</text>
            </view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
        </view>
        <view class="column">
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card topic">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
            ></image>
            <view class="name">忙里忙外，回家吃饭</view>
            <view class="price">19.9元<text>起</text></view>
            <view class="extra">
              <text class="icon-heart">1220</text>
              <text class="icon-preview">1000</text>
            </view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
          <view class="card brand">
            <view class="locate"> <text class="icon-locate"></text>中国 </view>
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
            ></image>
            <view class="name">小米优购</view>
            <view class="alt">小米优购闪购嗨购</view>
          </view>
          <view class="card goods">
            <image
              mode="widthFix"
              src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
            ></image>
            <view class="name"
              >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
              鹅软石桌布yg056</view
            >
            <view class="price">¥899</view>
          </view>
        </view>
      </template>
    </view>
  </template>
  
  <script>
  export default {
    props: ["tabIndex"],
  };
  </script>
  <style lang="scss">
  /* 瀑布流布局 */
  .masonry {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    .column {
      width: 345rpx;
      .card {
        padding: 20rpx 15rpx;
        margin-bottom: 20rpx;
        border-radius: 8rpx;
        background-color: #fff;
      }
    }
    .card {
      .name {
        font-size: 24rpx;
        color: #333;
        margin-top: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        line-height: 1;
        font-size: 22rpx;
        color: #cf4444;
      }
      .locate {
        text-align: left;
        color: #999;
        margin-bottom: 10rpx;
        font-size: 24rpx;
      }
    }
    .topic {
      .price {
        margin: 10rpx 0;
        text {
          color: #999;
        }
      }
      .extra {
        line-height: 1;
        font-size: 22rpx;
        color: #666;
      }
    }
    .extra {
      text {
        margin-right: 14rpx;
        &::before {
          margin-right: 4rpx;
        }
      }
    }
    .icon-preview {
      &:before {
        font-size: 25rpx;
      }
    }
    .goods {
      .price {
        margin-top: 10rpx;
      }
    }
    .brand {
      text-align: center;
      .name {
        margin: 10rpx 0 8rpx;
      }
      .alt {
        line-height: 1;
        color: #666;
        font-size: 24rpx;
      }
    }
  }
  </style>
  